<template>
	<view>
		<u-gap></u-gap>
		
		<view class="money" v-if="mainGoodsType!=4">
			<view class="">应支付金额：</view>
			<view class="">￥<text>{{money}}</text></view>
		</view>
		<view class="money" v-if="mainGoodsType==4">
			<view class="">应支付消费券：</view>
			<view class=""><text>{{money}}</text></view>
		</view>
		<u-gap></u-gap>
		<view class="pay" v-if="mainGoodsType!=4">
			<view class="item" v-for="(item,index) in pays" :key="index" @click="choicePay(item)">
				<u-image :src="appletImgUrl+item.icon" mode="widthFix" width="80" height="80" v-if="item.payType!='ZP_RED_INTEGRAL'"></u-image>
				<u-image :src="zpImgUrl+'pay_jf.png'" mode="widthFix" width="80" height="80" v-if="item.payType=='ZP_RED_INTEGRAL'"></u-image>
				<view class="info">
					<view class="">{{item.title}}</view>
					<view class="">{{item.tip}}</view>
					<view class="" v-if="item.payType=='ZP_RED_INTEGRAL'">可用积分:{{redintegralTotal}}<template v-if="redintegralTotal<money" style="color:#FF4D46"> ，当前积分不够，不能支付</template> </view>
					<view class="" v-if="(goodsClassId==1501||goodsClassId==1502)&&item.payType=='IOT_INTEGRAL'">可用积分:{{DeviceIntegral}}<template v-if="DeviceIntegral<money" style="color:#FF4D46"> ，当前积分不够，不能支付</template> </view>
				</view>
				<u-checkbox v-model="item.checked" shape="circle" active-color="#FF4D46" v-if="(redintegralTotal>=money&&item.payType=='ZP_RED_INTEGRAL')||item.payType!='ZP_RED_INTEGRAL'"></u-checkbox>
			</view>
			<!-- <view class="item">
				<u-image src="/static/pay_jf.png" mode="widthFix" width="80" height="80"></u-image>
				<view class="info">
					<view class="">消费积分支付</view>
					<view class="">安全支付 诚信汇款</view>
				</view>
				<u-checkbox shape="circle" active-color="#FF4D46"></u-checkbox>
			</view> -->
			<!-- 			<view class="item">
				<u-image src="/static/zfb.png" mode="widthFix" width="80" height="80"></u-image>
				<view class="info">
					<view class="">支付宝</view>
					<view class="">全球领先的独立第三方支付平台</view>
				</view>
				<u-checkbox shape="circle" active-color="#FF4D46"></u-checkbox>
			</view> -->
			<!-- <view class="item">
				<u-image src="/static/xfq.png" mode="widthFix" width="80" height="80"></u-image>
				<view class="info">
					<view class="">钱包余额</view>
					<view class="">方便 快捷</view>
				</view>
				<u-checkbox shape="circle" active-color="#FF4D46"></u-checkbox>
			</view> -->
			
		</view>
		<view class="btn">
			<view class="info" @click="pay" v-if="mainGoodsType!=4">
				确认支付
			</view>
			<view class="info" @click="redInterPay" v-if="mainGoodsType==4">
				确认支付
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>

		<u-popup v-model="show" mode="bottom" border-radius="40">
			<view class="popup">
				<view class="title">输入支付密码</view>

				<u-field maxlength="6" password label-width="0" v-model="password" label=" " placeholder="输入支付密码">
				</u-field>

				<view class="popup-btn">
					<view class="btn-box" @click="cashPay">
						确定
					</view>
					<view class="safe-area-inset-bottom"></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {appletImgUrl,zpImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				zpImgUrl:zpImgUrl,
				checked: true,
				show: false,
				password: '',
				pays: [
					{
							title: '微信支付',
							tip: '极速 安全 新体验',
							icon: 'wx.png',
							payType: 'MINI_PAY',
							checked: true
						},
					{
						title: '钱包余额',
						tip: '方便 快捷',
						icon: 'xfq.png',
						payType: 'ZP_MONEY',
						checked: false
					},
					
					{
						title: '积分支付',
						tip: '安全 快捷',
						icon: 'pay_jf.png',
						payType: 'ZP_RED_INTEGRAL',
						checked: false
					}
					
					
					
				],
				money: 0,
				scene: '',
				currentPay:"",
				payOrderNumber:"",
				mainGoodsType:null,
				payType:"",
				rewardIntegral:0,
				checkDisabled:false,
				DeviceIntegral:0,
				goodsClassId:"",
				couponTotal:0,
				redintegralTotal:0,
				freezeAmount:0
				
			};
		},
		onUnload() {
			console.log('支付',this.scene)
			if (this.scene == 'order' || this.payState || this.scene == 'oil' || this.scene == 'setMeal' || this.scene == 'coupon') return
			this.$u.route({
				type: 'redirect',
				url: '/pages/user/order/order',
				params: {
					current: 0
				}
			})
		},
		onLoad(options) {
			// {
			// 	title: '汇款支付',
			// 	tip: '安全支付 诚信汇款',
			// 	icon: 'remittance.png',
			// 	payType: 'TRANSFER',
			// 	checked: false
			// },
			console.log(options)
			this.money = options.money
			this.scene = options.scene
			this.couponId = options.couponId
			this.shareUserId = options.shareUserId;
			this.goodsClassId=options.goodsClassId;
			
			if(options.mainGoodsType){
				this.mainGoodsType=options.mainGoodsType
			}
			if(options.payType){
				this.payType=options.payType;
				if(options.payType=='RED_INTEGRAL'){
					this.mainGoodsType=4;
				}
				
			}
			
			this.payState = false
			if (options.data) {
				this.order = JSON.parse(options.data)
			}
			if (this.scene == 'setMeal') {
				this.pays = [{
					title: '微信支付',
					tip: '极速 安全 新体验',
					icon: this.appletImgUrl+'wx.png',
					payType: 'MINI_PAY',
					checked: true
				}]
			}
			this.getWalletCoupons();
			this.getmyDeviceIntegral();
		},
		methods: {
			getmyDeviceIntegral(){
				let that=this;
				that.$u.get('iotmerchantsdevice/myDeviceIntegral').then(res => {
					console.log(res);
					that.DeviceIntegral=res.currentIntegral;
				});
			},
			getWalletCoupons(){
				let that=this;
				this.$u.post('zpuserwallet/wallets',{walletType:""}).then(res => {
					console.log(res)
					if(res.length>0){
						res.map((item)=>{
							if(item.walletType=="MONEY"){
								that.couponTotal=item.currentAmount;
							}
							if(item.walletType=="RED_INTEGRAL"){
								that.redintegralTotal=item.currentAmount;
								that.freezeAmount=item.freezeAmount;
							}
						})
					}
				});
			},
			getBonusPoints() {
				let that=this;
				that.$u.get('mhbinfo/info').then(res => {
					console.log(res);
					that.rewardIntegral = res.rewardIntegral;
			
				});
			},
			cashPay() {
				let self=this;
				let payType = this.pays.filter(item => item.checked == true)[0].payType
				if (this.scene == 'oil') {
					console.log("加油")
					this.$u.post('oilcardopenorder/payOrder', {
						channel: 3,
						payType: 'ZP_MONEY',
						openId: uni.getStorageSync('openId')
					}).then(res => {
						this.payState = true
						uni.showToast({
							title: '支付成功！'
						})
						setTimeout(() => {
							this.$u.route({
								type: 'back',
								delta: 2
							})
						}, 1500)
					})
					return
				}
				if (this.scene == 'coupon' || this.scene == 'setMeal') {
					console.log("优惠券")
					let json = {
						channel: 3,
						payType: 'ZP_MONEY',
						openId: uni.getStorageSync('openId'),
						shareUserId: this.shareUserId,
						payPassword: this.password,
					}
					if (this.scene == 'coupon') {
						json.couponId = this.couponId
					} else {
						json.sharePackageId = this.couponId
					}
					this.$u.post(this.scene == 'coupon' ? 'coupon/buyCoupon' : 'sharepackage/drawSharePackage', json).then(res => {
						uni.showToast({
							title: '支付成功！'
						})
						setTimeout(() => {
							var pages = getCurrentPages();
							if (pages.length > 1) {
								var beforePage = pages[pages.length - 2];
								beforePage.$vm.paySuccessCallBack();
							}
							this.$u.route({
								type: 'back'
							})
						}, 1500)
					})
					return
				}
				
				if(payType=='ZP_RED_INTEGRAL'){//消费积分支付
				console.log("红积分")
					this.$u.post('orderform/payOrder',{
						channel: 3,
						orderNumbers: this.order.orderNumbers,
						payType: 'ZP_RED_INTEGRAL',
						payPassword: this.password
					}).then(res=>{
						console.log('333',res)
					uni.showToast({
						title: '支付成功！'
					})
					setTimeout(() => {
						self.$u.route({
							type: 'back',
							delta: 2
						})
					}, 1500)
					})
				}
				if(payType=='ZP_MONEY'){//余额支付
				console.log("余额支付")
					this.$u.post('orderform/payOrder', {
						channel: 3,
						orderNumbers: this.order.orderNumbers,
						payType: 'ZP_MONEY',
						payPassword: this.password
					}).then(res => {
						console.log(res);
						this.payState = true
						uni.showToast({
							title: '支付成功！'
						})
						setTimeout(() => {
							this.$u.route({
								type: 'redirect',
								url: '/pages/user/order/order',
								params: {
									current: 0
								}
							})
						}, 1500)
						// setTimeout(() => {
						// 	if (this.scene == 'order') {
						// 		var pages = getCurrentPages();
						// 		if (pages.length > 1) {
						// 			var beforePage = pages[pages.length - 2];
						// 			beforePage.$vm.updateOrder();
						// 		}
						// 		this.$u.route({
						// 			type: 'back'
						// 		})
						// 	} else {
						// 		this.$u.route({
						// 			type: 'reLaunch',
						// 			url: '/pages/user/shareOrder/shareOrder',
						// 			params: {
						// 				orderNumber: this.order.basicOrderNumber,
						// 				scene: 'pay'
						// 			}
						// 		})
						// 	}
						// }, 1500)
					})
				}
			
				
				
				
			},
			choicePay(item) {
				console.log(item)
				this.pays.forEach(item => item.checked = false)
				item.checked = true;
				this.currentPay=item.payType;
			},
			pay() {
				const self = this
				let payType = this.pays.filter(item => item.checked == true)[0].payType;
				if (payType == 'ZP_MONEY') {
					this.show = true
					return
				}
				
				
				if(payType == 'ZP_RED_INTEGRAL'){
					if(this.rewardIntegral<this.money){
						uni.showToast({
							title: '当前积分不够',
							icon: 'none'
						})
						return
					}
					this.show = true;
					return
				}
				if (this.scene == 'oil') {
					this.$u.post('oilcardopenorder/payOrder', {
						channel: 3,
						payType: payType,
						openId: uni.getStorageSync('openId')
					}).then(res => {

						let payStr = JSON.parse(res.payStr)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payStr.timeStamp,
							nonceStr: payStr.nonceStr,
							package: payStr.package,
							signType: payStr.signType,
							paySign: payStr.paySign,
							success: function(res) {
								self.payState = true
								uni.showToast({
									title: '支付成功！'
								})
								setTimeout(() => {
									// var pages = getCurrentPages(); //当前页面栈
									// if (pages.length > 1) {
									// 	var beforePage = pages[pages.length - 2];
									// 	beforePage.$vm.paySuccessCallBack();
									// }
									self.$u.route({
										type: 'back',
										delta: 2
									})
								}, 1500)
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							}
						});

					})
					return
				}
				if (this.scene == 'coupon' || this.scene == 'setMeal') {
					let json = {
						channel: 3,
						payType: payType,
						openId: uni.getStorageSync('openId'),
						shareUserId: this.shareUserId
					}
					if (this.scene == 'coupon') {
						json.couponId = this.couponId
					} else {
						json.sharePackageId = this.couponId
					}
					this.$u.post(this.scene == 'coupon' ? 'coupon/buyCoupon' : 'sharepackage/drawSharePackage', json).then(res => {
						let payStr = JSON.parse(res.payStr)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payStr.timeStamp,
							nonceStr: payStr.nonceStr,
							package: payStr.package,
							signType: payStr.signType,
							paySign: payStr.paySign,
							success: function(res) {
								uni.showToast({
									title: '支付成功！'
								})
								setTimeout(() => {
									var pages = getCurrentPages(); //当前页面栈
									if (pages.length > 1) {
										var beforePage = pages[pages.length - 2];
										beforePage.$vm.paySuccessCallBack();
									}
									self.$u.route({
										type: 'back'
									})
								}, 1500)
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							}
						});
					})
					return
				}
				
				this.$u.post('orderform/payOrder', {
					channel: 3,
					orderNumbers: this.order.orderNumbers,
					openId: uni.getStorageSync('openId'),
					payType: 'MINI_PAY'
				}).then(res => {
					let payStr = JSON.parse(res.payStr)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: payStr.timeStamp,
						nonceStr: payStr.nonceStr,
						package: payStr.package,
						signType: payStr.signType,
						paySign: payStr.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							self.payState = true
							uni.showToast({
								title: '支付成功！'
							})
							setTimeout(() => {
							
								if (self.scene == 'order') {
									var pages = getCurrentPages();
									if (pages.length > 1) {
										var beforePage = pages[pages.length - 2];
										beforePage.$vm.updateOrder();
									}
									self.$u.route({
										type: 'back'
									})
								} else {
									self.$u.route({
										type: 'reLaunch',
										url: '/pages/user/shareOrder/shareOrder',
										params: {
											orderNumber: self.order.basicOrderNumber,
											scene: 'pay'
										}
									})
								}
							}, 1500)
						},
						fail: function(err) {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						}
					});
				})
			},
			getSerialNumber(payOrderNumber){
				let self=this;
				self.$u.route('/pages/purchase/pay/remitPay',{payType:"TRANSFER",money:this.money,payOrderNumber:payOrderNumber});
				
			},
			redInterPay(){
				this.$u.post('orderform/payOrder', {
					channel: 3,
					orderNumbers: this.order.orderNumbers,
					openId: uni.getStorageSync('openId'),
					payType: 'ZP_RED_INTEGRAL'
				}).then(res => {
					let payStr = JSON.parse(res.payStr)
					uni.showToast({
						title: '支付成功！'
					})
					setTimeout(() => {
						this.$u.route({
							type: 'back',
							delta: 2
						})
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.popup {
		padding-bottom: 30rpx;

		.popup-btn {
			color: #FFFFFF;
			margin: 0 30rpx;
			margin-top: 100rpx;

			.btn-box {
				line-height: 100rpx;
				background: linear-gradient(90deg, #FF3868, #FC6161);
				box-shadow: 1rpx 10rpx 15rpx 2rpx rgba(255, 78, 70, 0.3);
				border-radius: 20rpx;
				text-align: center;
			}
		}

		.title {
			text-align: center;
			line-height: 100rpx;
			border-bottom: 1rpx solid #EBEBEB;
		}
	}

	.btn {
		width: 690rpx;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);

		.info {
			background: linear-gradient(90deg, #FF3768, #FC6161);
			box-shadow: 0px 10rpx 14rpx 2rpx rgba(255, 77, 70, 0.3);
			border-radius: 20rpx;
			color: #FFFFFF;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
		}
	}

	.pay {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 0 30rpx;
		padding-right: 0;

		.item {
			padding: 30rpx 0;
			display: flex;
			width: 100%;
			align-items: center;
			border-bottom: 1rpx solid #E7E6E6;

			&:last-child {
				border-bottom: none;
			}

			.info {
				flex: 1;
				margin-left: 20rpx;

				view {
					&:first-child {
						font-size: 28rpx;
					}

					&:last-child {
						font-size: 24rpx;
						color: #aaaaaa;
					}
				}
			}
		}
	}

	.money {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 50rpx 0;

		view {
			&:first-child {
				font-size: 26rpx;
			}

			&:last-child {
				margin-top: 10rpx;
				color: #FF4D46;
				font-size: 30rpx;

				text {
					font-size: 48rpx;
					font-weight: bold;
				}
			}
		}

		text-align: center;
	}

	page {
		background-color: $u-bg-color;
	}
</style>
